<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
        </script>

    <style>
        h1 {
            text-align: center;
        }

        table {
            margin: 0 auto;
            width: 60%;
            border: 2px solid rgb(90, 89, 89);
            border-collapse: collapse;
        }

        th,
        td {
            border: 2px solid rgb(97, 94, 94);
            padding: 5px;
        }

        th {
            background-color: rgb(224, 222, 222);
        }
    </style>

</head>

<body>
    <h1>真划算</h1>
    <table id="tb1">
        <tr>
            <th>商品</th>
            <th>单价(元)</th>
            <th>颜色</th>
            <th>库存</th>
            <th>好评率</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>罗技M185鼠标</td>
            <td>80</td>
            <td>黑色</td>
            <td>893</td>
            <td>98%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /></td>
        </tr>
        <tr>
            <td>微软X470键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /></td>
        </tr>
        <tr>
            <td>洛克iphone6手机壳</td>
            <td>60</td>
            <td>透明</td>
            <td>672</td>
            <td>99%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /></td>
        </tr>
        <tr>
            <td>蓝牙耳机</td>
            <td>100</td>
            <td>蓝色</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /></td>
        </tr>
        <tr>
            <td>金士顿U盘</td>
            <td>70</td>
            <td>红色</td>
            <td>482</td>
            <td>100%</td>
            <td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);" /></td>
        </tr>
    </table>

    <h1>购物车</h1>
    <table>
        <thead>
            <tr>
                <th>商品</th>
                <th>单价(元)</th>
                <th>数量</th>
                <th>金额(元)</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody id="tab">

        </tbody>
        <tfoot>
            <tr>
                <td colspan="3" align="right">总计</td>
                <td id="total"></td>
                <td></td>
            </tr>
        </tfoot>
    </table>


</body>
<script>
    function add_shoppingcart(btn) {
        var shoppingname = $(btn).parent().siblings().eq(0).html()
        var prich = $(btn).parent().siblings().eq(1).html()
        var state = $(`#tab td:contains("${shoppingname}")`)
        var reserve = $(btn).parent().siblings().eq(3).html()
        $(btn).parent().siblings().eq(3).html(reserve - 1)
        var str = ""
        if (state.length == 0) {
            str += `<tr>
            <td>${shoppingname}</td>
            <td>${prich}</td>
            <td align="right">
                <input type="button" value="-" onclick="jian(this);"/>
                <input type="text" size="3" readonly value="1"/>
                <input type="button" value="+" onclick="jia(this);"/>
            </td>
            <td>${prich}</td>
            <td align="center"><input type="button" value="删除" onclick="del(this);"/></td>
            </tr>`
            $("#tab").append(str);
            totles()
        } else {
            var num = $(state).next().next().children().eq(1).val()
            $(state).next().next().children().eq(1).val(+num + 1)
        }
    }
    //删除
    function del(btn) {
        var spname = $(btn).parent().parent().children().eq(0).html()
        var stock = $(`#tb1 td:contains("${spname}")`).next().next().next().html()
        var num = $(btn).parent().parent().children().eq(2).children().eq(1).val()
        $(`#tb1 td:contains("${spname}")`).next().next().next().html(+stock + +num)
        $(btn).parent().parent().remove()
        totles()
    }
    //点击增加
    function jia(btn) {
        var spname = $(btn).parent().parent().children().eq(0).html()
        var stock = $(`#tb1 td:contains("${spname}")`).next().next().next().html()
        $(`#tb1 td:contains("${spname}")`).next().next().next().html(+stock - 1)
        var num = $(btn).prev().val()
        $(btn).prev().val(++num)
        var price = $(btn).parent().prev().html()
        var money = price * num
        $(btn).parent().next().html(money)
        totles()

    }
    //点击减少
    function jian(btn) {
        var num = $(btn).next().val()
        if (num == 1) {
            $(btn).parent().parent().remove()
        }
        var spname = $(btn).parent().parent().children().eq(0).html()
        var stock = $(`#tb1 td:contains("${spname}")`).next().next().next().html()

        $(`#tb1 td:contains("${spname}")`).next().next().next().html(+stock + 1)
        $(btn).next().val(--num)
        var price = $(btn).parent().prev().html()
        var money = price * num
        $(btn).parent().next().html(money)
        totles()
    }

    //总计
    function totles() {
        var str = $('#tab tr')
        var sum = 0
        for (i = 0; i < str.length; i++) {
            var htmla = str.eq(i)
            var money = htmla.children().eq(3).html()
            sum += parseFloat(money)
        }
        $("#total").html(sum)
    }
</script>

</html>